import React, { PureComponent, Component } from 'react';
import moment from 'moment'
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity
} from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome';
import WXStyle from '../utils/style/wxstyle';
import Style from '../utils/style/style';
export default class CheckItem extends PureComponent {
    constructor(props) {
        super(props)
    }

    render() {
        const { item } = this.props;
        const iconSize = 13;
        const iconList = [
            {
                name: 'minus-square',
                color: '#f6383a',
                value: item.Lost
            },
            {
                name: 'plus-square',
                color: '#ff9800',
                value: item.Redundancy
            },
            {
                name: 'question-circle',
                color: '#607d8b',
                value: item.inv_unknown
            },
            {
                name: 'check-square',
                color: '#1aad19',
                value: item.Normal
            }
        ]
        const time = moment(item.inv_time).format('YYYY-MM-DD HH:mm:ss');
        return (
            <TouchableOpacity onPress={this.props.pressItem} style={styles.item}>
                <View style={[Style.dfr, Style.aic, styles.box]}>
                    <View style={[Style.flex1, Style.jssb]}>
                        <View ><Text style={[styles.invCode]}>{item.inv_code}</Text></View>
                        <View style={[Style.dfr, Style.aic, Style.jsfs]}>
                            {
                                iconList.map((icon, index) => (
                                    <View style={[styles.infoItem]} key={icon.name}>
                                        <Icon name={icon.name} size={iconSize} color={icon.color}></Icon>
                                        <Text style={[styles.iconText, { color: icon.color }]}> {icon.value}</Text>
                                    </View>
                                )
                                )
                            }
                        </View>
                        <View style={[Style.dfr, Style.aic]} >
                            <Icon name="clock-o" size={iconSize} ></Icon>
                            <Text style={styles.iconText}>{time}</Text>
                        </View>
                    </View>

                    <View style={[styles.angleRight, Style.aic, Style.jsfe]}>
                        <View style={[styles.icon]}>
                            <Icon name="angle-right" size={30}></Icon>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>

        )
    }
}
const styles = StyleSheet.create({
    item: {
        height: 81,
        width: Style.width,
        backgroundColor: '#fff',
    },
    box: {
        borderStyle: 'solid',
        borderColor: '#e5e5e5',
        borderBottomWidth: 1,
        marginLeft: 10,
        paddingTop: 10,
        paddingBottom: 10,
    },
    infoItem: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        width: 60
    },
    invCode: {
        fontSize: 17,
        color: '#5f5e5e'
    },
    angleRight: {
        margin: 0,
        width: 30,
    },
    icon: {
        marginRight: 10
    },
    iconText: {
        fontSize: 13,
        marginLeft: 3
    }
})